<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<head>
	<title data-localize="statistics_error2.buganalysistwo">异常分析二</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">
.u-container{
	position: relative;
	width: 100%;
	height: 140px;
	margin: 0 auto;
	margin-top: 40px;
	overflow-x: hidden;
	overflow-y: auto;
}
.u-container .machine:hover{
	background: #29abe2;
}
.u-container p{
	display: none;
}
.machine{
	float: left;
	height: 130px;
	text-align: center;
}
.machine img{
	height: 100%;
}
.undone{
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    background: #d0d0d0;
}
.u-datacon{
	position: relative;
	width: 100%;
	height: 840px;
}
.u-leftline{
	position: relative;
	width: 50%;
	height: 540px;
	float: left;
}
.u-chartcon{
	position: relative;
	float: left;
	width: 900px;
	height: 900px;
	margin-top: 40px;
	margin-left: 100px;
	text-align: center;
	overflow: hidden;
}
.u-chart{
	position: relative;
	float: left;
	width: 100%;
	height: 300px;
	margin: 172px 0 0 26px;
	border-left: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
.u-chartleft{
	position: absolute;
	display: block;
	height: 100%;
	width: 20px;
	left: -22px;
	top: 0;
}
.u-changetime{
	width: 100%;
	height: 30px;
}
.u-changetime input.datainp{
	text-indent: 7px;
	height: 27px;
	width: 170px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
	margin-left: 4px;
}
.u-start{
	float: left;
	margin-left: 90px;
}
.u-start label,.u-end label{
	display: inline-block;
	text-align: left;
	width: 100px;
}
.u-end{
	float: left;
	margin-left: 10px;
}
.u-auto{
	line-height: 27px;
}
.u-chartbottom{
	position: absolute;
	display: block;
	width: 40px;
	height: 20px;
	line-height: 20px;
	margin: 0;
	left: -30px;
	bottom: -22px;
}
.u-chartbars{
	float: left;
	position: relative;
	height: 100%;
	width: 20px;
	margin-left: 20px;
	-webkit-transform: rotateX(180deg);
}
.u-chartbars .u-mname{
	position: absolute;
	left: -15px;
	top: -16px;
	line-height: 16px;
	width: 50px;
	font-size: 12px;
	-webkit-transform: rotateX(-180deg);
}
.u-product{
	float: left;
	height: 46px;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #f5d73e;
}
.u-break{
	float: left;
	width: 100%;
	height: 20px;
	background: #f44336;
}
.u-error{
	float: left;
	width: 100%;
	height: 20px;
	background: #009fff;
}
.u-chartbars:nth-child(1) .u-product{
	height: 70%;
}
.u-chartbars:nth-child(2) .u-product{
	height: 20%;
}
.u-chartbars:nth-child(3) .u-product{
	height: 50%;
}
.u-chartbars:nth-child(4) .u-product{
	height: 90%;
}
.u-chartbars:nth-child(5) .u-product{
	height: 40%;
}
.u-xm{
	width: 100%;
	margin-top: 20px;
	text-align: left;
}
.u-xm label{
	width: 100px;
	display: inline-block;
}
.u-xm select{
	width: 170px;
	height: 30px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
}
.loading{
	background-color: rgba(255,255,255,0.9);
	background-position: center center;
	width: 100%;
	height: 100%;
	background-image: url("image/loading.gif");
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10000;
	background-repeat: no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="css/machine.css">
</head>
<body>
<div class="loading"></div>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="statistics_error2.backindex">回到首页</div></a>
	<h3 data-localize="statistics_error2.buganalysis">异常分析</h3>
	   <div class="changeLang">
		   <p class="u-lang"><span>中文</span><span>English</span></p>
		   <div isopen="true" class="changeLangBtn"></div>
	   </div>
</div>
</div>

<div class="u-datacon">
	<div class="u-chartcon">
		<div class="u-changetime">
			<div class="u-start"><label data-localize="statistics_error2.begintime">开始时间</label><input type="text" class="datainp startDate" readonly/></div>
			<div class="u-end"><label data-localize="statistics_error2.endtime">>结束时间</label><input type="text" class="datainp endDate" readonly/></div>
		</div>
		<div class="u-xm">
			<label style="margin-left: 90px;" data-localize="statistics_error2.line">产线</label>
			<select class="u-selectLine">
			</select>
			<br><br>
			<label style="margin-left: 90px;" data-localize="statistics_error2.equipment">设备</label>
			<select class="u-equipment" id="u-eqno">
		  	</select>
			
			<!-- <label style="margin-left: 90px;">PartNo</label>
			<select class="selectpicker2 bla bla bli u-partno" id="u-partno" multiple data-live-search="true">
		  	</select> -->
			<a class="u-downloadCSV" id="downloadCSV" style="margin-left: 10px;"><div class="u-btnblue" data-localize="statistics_error2.downloadCSV">导出CSV</div></a>
			<div class="u-btnblue u-confirmbtn" data-localize="statistics_error2.confirm">确认</div>
		</div>
		<div id='canvasDiv'></div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.localize.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/language_cookie.js" charset="utf-8"></script>
<script type="text/javascript" src="js/ichart.1.2.1.min.js"></script>
<script type="text/javascript" src="js/jedate.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script type="text/javascript">
var labela = [];
var csvData;
var data;

var chart;
$(function() {
    $(".loading").hide();
    csvData = {
        header: [langMsg.statistics_error2.lineId,langMsg.statistics_error2.equipmentId,langMsg.statistics_error2.equipmentName,langMsg.statistics_error2.breaktime,langMsg.statistics_error2.stoptime,langMsg.statistics_error2.waittime,langMsg.statistics_error2.worktime,langMsg.statistics_error2.troubletime],
        body: []
    };
    data = [
        {
            name : langMsg.statistics_error2.waittime,
            value:[null],
            color:'#f5d73e'
        },
        {
            name : langMsg.statistics_error2.worktime,
            value:[null],
            color:'#f44336'
        },
        {
            name : langMsg.statistics_error2.troubletime,
            value:[null],
            color:'#0ca01f'
        },
        {
            name : langMsg.statistics_error2.breaktime,
            value:[null],
            color:'#dadada'
        },
        {
            name : langMsg.statistics_error2.stoptime,
            value:[null],
            color:'#252525'
        }
    ];
    chart = new iChart.ColumnMulti2D({
		render: 'canvasDiv',
		animation:false,
		animation_duration:'500',
		data: data,
		align: 'center',
		width: 900,
		height: 460,
		shadow: false,
		legend:{
			enable:true,
			background_color : null,
			border : {
				enable : false
			}
		},
		background_color: '#ffffff',
		coordinate: {
			width: 640,
			height: 260,
			striped_factor: 0.18,
			gridlinesVisible:false,
			grid_color: '#4e4e4e',
			axis: {
				color: '#252525',
				width: [0, 0, 2, 2]
			},
			scale: [{
				position: 'left',
				scale_share:5,
				label: {
					color: '#333333',
					font: '微软雅黑',
					fontsize: 11,
					fontweight: 600
				},
				scale_color: '#9f9f9f'
			}]
		}
	});
	//利用自定义组件构造左侧说明文本
	chart.plugin(new iChart.Custom({
		drawFn: function() {
			//计算位置
			var coo = chart.getCoordinate(),
				x = coo.get('originx'),
				y = coo.get('originy'),
				w = coo.width,
				h = coo.height;
			//在左上侧的位置，渲染一个单位的文字
			chart.target.textAlign('start')
				.textBaseline('bottom')
				.textFont('600 11px 微软雅黑')
				.fillText(langMsg.statistics_error2.timeminutute, x - 40, y - 12, false, '#333333');
		}
	}));
	chart.draw();
	jeDate({
        dateCell:".endDate",
        format:"YYYY-MM-DD hh:mm:ss",
        isinitVal:true,
        isTime:true, //isClear:false,
        minDate:"2014-09-19 00:00:00"
    });
    jeDate({
        dateCell:".startDate",
        format:"YYYY-MM-DD hh:mm:ss",
        isinitVal:true,
        isTime:true, //isClear:false,
        minDate:"2014-09-19 00:00:00"
    });

    $('.u-downloadCSV').click(function(){
    	var obj = document.getElementById('downloadCSV');
        csvDownload(langMsg.statistics_error2.buganalysistwo,obj,csvData);
    });
    var lineurl = getUrl('statistics_getLine'),
    	equrl = getUrl('statistics_getEq'),
    	pnurl = getUrl('statistics_getPN');
    $.ajax({  
        type:'get',      
        url: lineurl,
        async : false, 
        dataType: "json", 
        success:function(data){
        	var inhtml = "";
            if (data.resultCode == 200 && data.resultMessage == "OK") {
            	for (var i = 0,len = data.resultObject.length; i < len; i++) {
            		inhtml += '<option value="'+data.resultObject[i].lineId+'">'+data.resultObject[i].lineName+'</option>';
				}
				$('.u-selectLine').append(inhtml);
            }
        },
        error:function(){
            console.log("selectEqByLineId fail");
        }  
    });
    eqRender(equrl);
    $(".u-selectLine").on('change',function(e){
    	eqRender(equrl);
    })
 //    $(".u-equipment").on('change',function(e){
 //    	console.log($(".u-equipment").val());
 //    	var html = "",
 //    		equi = $(".u-equipment").val(),
 //    		lineId = $(".u-selectLine").val();
	// 	if (!lineId) {
	// 		return false;
	// 	}
 //    	if (!equi) {
 //    		return false;
 //    	}
 //    	for (var a = 0,len = equi.length; a < len; a++) {
 //    		$.ajax({  
	// 	        type:'get',      
	// 	        url: pnurl,
	// 	        async : false, 
	// 	        dataType: "json",
	// 	        data:{"line":lineId,"eqIds":equi[a]},  
	// 	        success:function(data){
	// 	            if (data.resultCode == 200 && data.resultMessage == "OK") {
	// 	            	for (var i = 0,len = data.resultObject.length; i < len; i++) {
	// 	            		html += '<option value="'+data.resultObject[i].uId+'">'+data.resultObject[i].partNo+'</option>';
	// 					}
	// 	            }
	// 	        },
	// 	        error:function(){
	// 	            console.log("selectPartNoById fail");
	// 	        }  
	// 	    });
 //    	}
 //    	$('#u-partno').empty();
 //    	console.log(html);
 //    	if (html) {
 //    		$('#u-partno').append(html);
 //    		$('#u-partno').append('</optgroup>');
 //    		$('#u-partno').selectpicker('refresh');
 //    	}else{
 //    		$('#u-partno').empty();
 //    	}
	// });
	//开始画图
	// $('#u-eqno').selectpicker({
 //        'selectedText': '1'
 //    });
    // $('#u-partno').selectpicker({
    //     'selectedText': '1'
    // });
	//开始画图
	// $('.selectpicker').selectpicker({
 //        'selectedText': '1'
 //    });
	$('.u-confirmbtn').click(function(){
		csvData['body'] = [];

		var url = getUrl('statistics_error2'),
			line,startDate,endDate,
			devices;
		line = $(".u-selectLine").val();
		if (!line) {
			return false;
		}
		startDate = $('.startDate').val();
		endDate = $('.endDate').val();
		devices = $('#u-eqno').val();
		// if (devices) {
		// 	devices = devices.join(",");
		// }
		//devices = "1,2,4";
		console.log(line,startDate,endDate,devices);
		var mes = getData(line,startDate,endDate,devices,url);

	})
});
function getData(line,startDate,endDate,devices,url){
    $(".loading").show();
    var res = null;
    $.ajax({
        type:'get',
        url: url,
        async : false,
        dataType: "json",
        data:{"line":line,"startDate":startDate,"endDate":endDate,"devices":devices},
        success:function(mes){
            $(".loading").hide();
            if (mes.resultCode == 200 && mes.resultMessage == "OK") {
                var aaa = [0],bbb=[0],ccc=[0],ddd=[0],eee=[0];
                console.log(mes);
                for (var i = 0,len = mes.resultObject?1:0; i < len; i++) {
                    aaa[i] = mes.resultObject[i].waitTime;
                    bbb[i] = mes.resultObject[i].workTime;
                    ccc[i] = mes.resultObject[i].errorTime;
                    ddd[i] = mes.resultObject[i].outPowerTime;
                    eee[i] = mes.resultObject[i].stopTime;
                    csvData['body'].push([line,String($('#u-eqno').val()),String($('.u-equipment').find('option:selected').text()),mes.resultObject[i].outPowerTime,mes.resultObject[i].stopTime,mes.resultObject[i].waitTime,mes.resultObject[i].workTime,mes.resultObject[i].errorTime]);
                }
                data = [
                    {
                        name : langMsg.statistics_error2.waittime,
                        value:aaa,
                        color:'#f5d73e'
                    },
                    {
                        name : langMsg.statistics_error2.worktime,
                        value:bbb,
                        color:'#f44336'
                    },
                    {
                        name : langMsg.statistics_error2.troubletime,
                        value:ccc,
                        color:'#0ca01f'
                    },
                    {
                        name : langMsg.statistics_error2.breaktime,
                        value:ddd,
                        color:'#dadada'
                    },
                    {
                        name : langMsg.statistics_error2.stoptime,
                        value:eee,
                        color:'#252525'
                    }
                ];
                chart.load(data);
            }
        },
        error:function(){
            console.log("fail");
        }  
    });
    return res;
}
function eqRender(url){
	var lineId = $(".u-selectLine").val();
	if (!lineId) {
		return false;
	}
	$('#u-eqno').empty();
	$.ajax({  
        type:'get',      
        url: url,
        async : false, 
        dataType: "json",
        data:{"line":lineId},  
        success:function(data){
        	var inhtml = "";
            if (data.resultCode == 200 && data.resultMessage == "OK") {
            	for (var i = 0,len = data.resultObject.length; i < len; i++) {
                    if(getCookie("somoveLanguage")=="zh"){
                        inhtml += '<option value="'+data.resultObject[i].equipmentId+'">'+data.resultObject[i].equipmentName+'</option>';
                    }else if (getCookie("somoveLanguage")=="en"){
                        inhtml += '<option value="'+data.resultObject[i].equipmentId+'">'+data.resultObject[i].equipmentNameEn+'</option>';
                    }


            	}
				$('#u-eqno').append(inhtml);
				//$('#u-eqno').append('</optgroup>');
				//$('#u-eqno').selectpicker('refresh');
            }
        },
        error:function(){
            console.log("selectEqByLineId fail");
        }  
    });
}
</script>

</body>
</html>